<template>
  <div class="style-2">

    <div class="container">
      <div class="row">
        <div class="col-md-4">

          <h1>RNTV</h1>

          <!-- Start Sign In Form -->
          <div class="fh5co-form animate-box fadeIn">
            <el-form :model="loginForm" :rules="loginFormRule" ref="loginForm" class="loginForm">
              <el-form-item label="用户名" prop="username">
                <el-input autofocus v-model="loginForm.username" placeholder="用户名/邮箱/手机号"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
              </el-form-item>
              <el-form-item prop="remember">
                <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button :loading="loading.login" type="primary" @click="submitForm('loginForm')">登录{{loading.login ?
                  '...' : ''}}
                </el-button>
              </el-form-item>
            </el-form>

          </div>

          <!-- END Sign In Form -->

        </div>
      </div>
      <div class="row" style="padding-top: 60px; clear: both;">
        <div class="col-md-12 text-center">
          <p>
            <small>&copy; 版权所有 睿那体育 RNTV</small>
            <br/>
            <small>&copy;产品开发商 羽戈科技 YG</small>
          </p>
        </div>
      </div>
    </div>


  </div>

</template>

<script>
  import axios from 'axios'

  axios.defaults.withCredentials = true

  export default {
    name: "element",
    data() {
      return {
        loading: {
          login: false
        },
        loginForm: {
          username: '',
          password: '',
          remember: false
        },
        redirect_url: 'http://www.baidu.com',
        loginFormRule: {
          username: {required: true, message: '请输入用户名或邮箱', trigger: 'blur'},
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
        }
      }
    },
    beforeCreate() {
      let auth_code = this.$cookie.get('auth_code')
      if (this.$cookie.get('auth_code')) {
        this.GLOBAL.request({
          method: 'POST',
          baseURL: this.GLOBAL.RNTY_AUTH_BASE_URL,
          url: 'clients/auth',
          data: {
            auth_code: auth_code
          }
        }).then(({data}) => {
          this.redirect_url = data
        }).catch(() => {
          this.$router.push({name: 'error401', params: {error_data: '授权码已经过期'}})
        })
      } else {
        this.$router.push({name: 'error401', params: {error_data: '此应用还未经睿那授权'}})
      }
    },
    mounted() {
      this.loginForm.username = this.$cookie.get('rnty_username')
      if (this.$cookie.get('rnty_remember')) {
        this.loginForm.remember = true
        this.loginForm.password = this.$cookie.get('rnty_password')
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading.login = true
            this.GLOBAL.request({
              method: 'post',
              baseURL: this.GLOBAL.RNTY_AUTH_BASE_URL,
              url: 'users/login',
              data: this.loginForm
            }).then(({data}) => {
              this.$cookie.set('rnty_access_token', data.access_token, 1);
              this.loading.login = false
              this.$cookie.set('rnty_username', this.loginForm.username, '')
              this.$cookie.set('rnty_remember', this.loginForm.remember ? 1 : '', '')
              this.$cookie.set('rnty_password', this.loginForm.remember ? this.loginForm.password : '', '')
              window.location.href = this.redirect_url
            }, (error) => {
              this.loading.login = false
              if (error.response && error.response.status === 422) {
                this.$message.error({message: error.response.data[0].message,});
              }
            })
          } else {
            return false
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
  @import "../assets/css/login.css";

  .form-control {
    width: 200px;
  }

  .loginForm {
    width: 400px;
    margin: 0 auto;
  }
</style>
